<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" href="./bootstrap.css">
</head>

<body>
    <div id="app">
        <div class="form-group">
            <label for="exampleInputEmail1">账号</label>
            <input type="text" v-model="user" class="form-control" id="exampleInputEmail1" placeholder="账号">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">电话</label>
            <input type="text" v-model="tel" class="form-control" id="exampleInputEmail1" placeholder="电话">
        </div>
        <button type="submit" v-if="isOK" class="btn btn-info" @click="doXiugai">修改</button>
        <button type="submit" v-else class="btn btn-info" @click="add">添加</button>
        <button type="submit" @click="reset" class="btn btn-warning">重置</button>

        <table class="table table-bordered table-hover">
            <tr>
                <th>编号</th>
                <th>账号</th>
                <th>电话</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) in  bd ">
                <td>{{ index+1 }}</td>
                <td>{{ item.user }}</td>
                <td>{{ item.tel }}</td>
                <td>
                    <button type="submit" class="btn btn-info" @click="xg(index)">修改</button>
                    <button type="submit" class="btn btn-danger" @click="del(index)">删除</button>
                </td>
            </tr>
            <tr v-if="bd.length <=0">
                <td colspan="4">暂无数据</td>
            </tr>
            <tr v-else>
                <td colspan="4">
                    <button type="submit" class="btn btn-danger" @click="delAll">全部删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                bd: [
                    // {user:this.user,tel:this.tel},
                    // {user:this.user,tel:this.tel},
                    // {user:this.user,tel:this.tel},
                    // {user:this.user,tel:this.tel},
                ],
                user: "",
                tel: "",
                // 空间变量
                isOK: false,
                xinindex: null,//修改的数据的索引
            },
            methods: {
                // 重置
                reset() {
                    this.user = "";
                    this.tel = "";
                },
                // 添加
                add() {
                    var { user, tel } = this;
                    var obj = {
                        user, tel,
                    }
                    // console.log(obj);
                    if (this.user == '' && this.tel == '') {
                        return alert('不能为空')
                    }
                    this.bd.push(obj)
                    this.reset()
                },
                // 删除全部
                delAll() {
                    this.bd = [];
                },
                // 修改
                xg(index) {
                    var obj = this.bd[index]//获取了要修改的对象
                    this.user = obj.user;
                    this.tel = obj.tel;
                    
                    this.isOK = true,//显示修改
                    this.xinindex = index;
                },
                doXiugai(){
                    var {user,tel} = this;
                    // 通过下标找到你要找的对像然后找到user然后重新赋值
                    this.bd[ this.xinindex].user = user;
                    this.bd[ this.xinindex].tel = tel;
                    this.reset();
                    this.isOK = false;

                },
                // 删除
                del(index) {
                    // console.log(index);
                    this.bd.splice(index, 1)
                }
            }
        })
    </script>
</body>

</html>